<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>菜单列表</title>
    <link rel="stylesheet" href="../static/plugins/layui/css/layui.css">
</head>
<style>
    .ok-body {
        padding: 10px
    }
</style>

<body>
<div class="ok-body">

    <div class="layui-row" style="margin-top: 15px">
        <form class="layui-form" action="">

            <label class="layui-form-label">查询条件</label>

            <div class="layui-input-inline">

                <select id='select'>
                    <option value=""></option>
                    <option value="name">名称</option>
                    <option value="description">描述</option>
                </select>
            </div>

            <div class="layui-input-inline">
                <input class="layui-input" id="searchValue" placeholder="根据条件输入合适值" autocomplete="off">
            </div>


            <button class="layui-btn  layui-btn-normal" style="margin-left: 10px" lay-submit lay-filter="search">搜索
            </button>

            <button type="button" class="layui-btn layui-btn-warm" id="add" style="float: right">新增</button>

            <button type="button" class="layui-btn layui-btn-danger" id="delete" style="float: right">删除</button>

        </form>

    </div>

    <hr class="layui-bg-orange">

    <table class="layui-hide" id="menu" lay-filter="menu"></table>
    <!--分页Div-->
    <div id="pageDiv"></div>

</div>

<script src="../static/plugins/layui/layui.js"></script>
<script src="../static/js/jquery-3.2.1.min.js"></script>
<script src="../static/js/jquery.base64.js"></script>
<script src="../static/js/device.js"></script>

<script th:inline="none">
    layui.use(['table', 'laypage', 'form'], function () {

        var table = layui.table;
        var form = layui.form;

        var tableName = 'menu';

        var tableRenderObject = {
            elem: '#' + tableName
            , title: '菜单'
            , tableName: tableName
            , searchCol: ''
            , searchValue: ''
            ,defaultToolbar: ['filter', 'print']
            ,toolbar: true
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'name', title: '角色', align: 'center'}
                , {field: 'description', title: '描述', align: 'center'}
                , {field: 'url', title: 'URL', align: 'center'}
                , {title: '类型', align: 'center', templet: function (d) {
                        if (d.type === 0) {
                            return '导航';
                        } else if (d.type === 1) {
                            return '菜单';
                        } else if (d.type === 2) {
                            return '功能';
                        }
                    }
                }
                , {field: 'creatorName', align: 'center', title: '创建者'}
                ,{title:'创建日期',align:'center',width:120,templet:function (d) {
                        return JJZ.FormatDate(d.gmtCreate,'yyyy-MM-dd');
                    }}
                , {
                    fixed: 'right', title: '操作', align: 'center', templet: function (d) {
                        return '<a href="javascript:JJZ.editPage(\''+tableName+'\','+d.id+')" class="layui-table-link">编辑</a>'
                    }
                }
            ]]
        };

        var myTable = new JJZ.MyTable(tableRenderObject);

        form.on('submit(search)', function (data) {
            var searchCol = $('#select').val();

            tableRenderObject.searchCol = searchCol;
            var searchValue = $('#searchValue').val();
            tableRenderObject.searchValue = searchValue;
            myTable.render();
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });


        //新增，跳转至页面
        $('#add').click(function () {
            myTable.add();
        });

        //批量删除数据
        $('#delete').click(function () {
            var checkStatus = table.checkStatus('menu') //idTest 即为基础参数 id 对应的值
                , data = checkStatus.data; //获取选中的数据
            layer.confirm('确认删除？', function (index) {
                myTable.delete(data);
                myTable.render();
                layer.close(index);
            });
        });

    });

</script>
</body>
</html>